<template>
    <div>
        <div style="width:600px;height:450px" ref="chart">

        </div>
    </div>
</template>

<script>
export default {
    name:'QuesDis',
    props:['quesData','quesCount'],
    data(){
        return{
            chart: null,
        }
    },
    mounted(){
        this.dataInit();
    },
    beforeDestroy(){
        this.destoryData();
    },
    destoryData(){
        if(!this.chart){
        return
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods:{
        dataInit(){
            const option =  {
                title: {
                text: '题目情况',
                subtext: '总题数：'+this.quesCount,
                left: 'center'
                },
                tooltip: {
                trigger: 'item'
                },
                legend: {
                orient: 'vertical',
                left: 'left',
                type: 'scroll',
                },
                series: [
                {
                    name: '题目分布',
                    type: 'pie',
                    radius: '50%',
                    data: this.quesData,
                    emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                    }
                }
                ]
            }
            this.chart = this.$echarts.init(this.$refs.chart);
            this.chart.setOption(option);
        },
        destoryData(){
            if(!this.chart){
            return
            }
            this.chart.dispose();
            this.chart = null;
        },
        
    },
    watch:{
        quesData:{
            handler: function(val){
                this.destoryData()
                this.dataInit();
            },
            deep:true
        }
    },
}
</script>

<style>

</style>